import TodoListItem from './todo-list-item.js'

const TodoList = {
  template: `
    <div class="list-container" ref="listRef">
      <div class="tabs">
        <button>所有(5)</button>
        <button>已完成(2)</button>
        <button>未完成(3)</button>
      </div>

      <div class="list" v-if="list.length">
        <todo-list-item v-for="todo in list" :key="todo.id" :item="todo"></todo-list-item>
      </div>
      <div class="empty" v-else>
        当前待办事项列表为空，请添加新待办事项
      </div>
    </div>
  `,
  components: { // 局部注册子组件
    TodoListItem,
  },
  props: ['list'], // 声明可接收属性
}

export default TodoList
